<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="/public/lib/mui-master/dist/css/mui.css" rel="stylesheet" />
		<link href="/public/lib/mui-master/examples/login/css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.warning{
				color:red;
				margin-left:3px;
			}
			.link-area{
				text-align:center;
			}
			
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">上商门票系统-注册</h1>
		</header>
		<div class="mui-content">
			<!--表单具有默认提交行为 默认是同步的 同步表单提交浏览器会锁死 等待服务端响应结果-->
			<!--当表单同步提交后 无论服务端响应的是什么 都会将当前的结果覆盖掉当前的页面-->
			<form id="register" class="mui-input-group" method="post" action="/reg">
				<div class="mui-input-row">
					<label for="account">账号</label>
					<input name="account" id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
				<div class="mui-input-row">
					<label for="password">密码</label>
					<input name="password" id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label for="email">邮箱</label>
					<input name="email" id='email' type="email" class="mui-input-clear mui-input" placeholder="请输入邮箱">
				</div>
				<p class="warning">{{err_message}}</p>
				<div class="mui-content-padded">
					<button type='submit' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
				</div>
			</form>
			<div class="mui-content-padded">
				<div class="link-area"><a href='/'>已有账号?点击登录</a>
				</div>
			</div>
		</div>
		<script src="/public/lib/mui-master/dist/js/mui.js"></script>
		<script src="/public/lib/mui-master/examples/login/js/app.js"></script>
        <script src="/public/lib/jquery-3.3.1.js"></script>
        <script>
            $("#register").submit( function (e) {
                e.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    url:'/reg',
                    type:'post',
                    data:formData,
                    dataType:'json',
					// 服务器端针对异步请求无效
                    success: function (data) {
                        var err_code = data.err_code;
                        if(err_code === 0){
                            window.location.href = '/';
                            console.log('注册成功')
						}else if(err_code === 1){
                            console.log('邮箱或者昵称已存在')
						}else if(err_code === 500){
                            console.log('服务器忙 爬!')
                        }
                    }
                })
            })
        </script>
	</body>

</html>